<!DOCTYPE html>

<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:replace="common/sections :: header-css"/>

<body>


	<!-- Left Panel -->
	<aside th:replace="common/menus :: left-panel"></aside>

    <!-- Right Panel -->
	<div id="right-panel" class="right-panel">
	
		<header th:replace="common/menus :: rp-header"/>
		
		<div th:replace="common/menus :: rp-breadcrumbs (pageTitle='Dashboard')"/>
    
    	<!-- Page Content Begin -->
    
	    	<div class="content mt-3">
	            <div class="animated fadeIn">
	                
	                <div class="row">
	                
	                	<!-- Begin Chart -->
						<div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="mb-3">Account Balance Summary</h4>
                                    <canvas id="balanceSummary"></canvas>
                                </div>
                            </div>
                        </div><!-- End Chart-->	 
                        
                        <!-- Begin Chart -->
						<div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="mb-3">Deposit vs. Withdraw (Last 3 Months)</h4>
                                    <canvas id="depositVsWithdraw"></canvas>
                                </div>
                            </div>
                        </div><!-- End Chart-->	 
                        
                        <!-- Begin Chart -->
						<div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="mb-3">Withdraw By Category (Last 3 Months)</h4>
                                    <canvas id="withdrawByCategory"></canvas>
                                </div>
                            </div>
                        </div><!-- End Chart-->	   
                        
                        <!-- Begin Chart -->
						<div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="mb-3">Deposit By Category (Last 3 Months)</h4>
                                    <canvas id="depositByCategory"></canvas>
                                </div>
                            </div>
                        </div><!-- End Chart-->	                       
	                
	    			</div><!-- End Row -->

	    			
	            </div><!-- .animated -->
	        </div><!-- .content -->
	       
	    <!-- Page Content End -->
	    
	</div> <!-- End right panel -->
    
	<!-- Footer -->
	<div th:replace="common/sections :: footer-scripts"></div>
	<script th:inline="javascript"> /*<![CDATA[*/
	
		( function ( $ ) {
		    
			// Balance Summary Bar Chart
			var ctx = document.getElementById( "balanceSummary" );
		    ctx.height = 100;
		    var myChart = new Chart( ctx, {
		        type: 'bar',
		        data: {
		            labels: /*[[${accountBalanceSummary[0]}]]*/ [ ],
		            datasets: [
		                {
		                    label: "Account Balance",
		                    data: /*[[${accountBalanceSummary[1]}]]*/ [ ],
		                    borderColor: "rgba(0, 123, 255, 0.9)",
		                    borderWidth: "0",
		                    backgroundColor: "rgba(0, 123, 255, 0.5)"
		                            }
		                        ]
		        },
		        options: {
		            scales: {
		                yAxes: [ {
		                    ticks: {
		                        beginAtZero: true
		                    }
		                                } ]
		            }
		        }
		    } ); 
		    // End Balance Summary Chart
		    
		    // Deposit vs. Withdraw Bar Chart
		    var ctx = document.getElementById( "depositVsWithdraw" );
		    ctx.height = 100;
		    var myChart = new Chart( ctx, {
		        type: 'bar',
		        data: {
		            labels: /*[[${creditVsDebit[0]}]]*/ [ ],
		            datasets: [
		                {
		                    label: "Deposit",
		                    data: /*[[${creditVsDebit[1]}]]*/ [ ],
		                    borderColor: "rgba(2, 89, 40, 0.9)", // "rgba(0, 123, 255, 0.9)"
		                    borderWidth: "0",
		                    backgroundColor: "rgba(2, 89, 40, 0.5)" // "rgba(0, 123, 255, 0.5)"
		                            },
		                {
		                    label: "Withdraw",
		                    data: /*[[${creditVsDebit[2]}]]*/ [ ],
		                    borderColor: "rgba(217,103,4,0.9)",  // "rgba(0,0,0,0.09)"
		                    borderWidth: "0",
		                    backgroundColor: "rgba(217,103,4,0.5)" // "rgba(0,0,0,0.07)"
		                            }
		                        ]
		        },
		        options: {
		            scales: {
		                yAxes: [ {
		                    ticks: {
		                        beginAtZero: true
		                    }
		                                } ]
		            }
		        }
		    } );
		    // End Balance Summary Chart
		    
		    
		  	// Withdraw By Category
		    var ctx = document.getElementById( "withdrawByCategory" );
		    ctx.height = 150;
		    var myChart = new Chart( ctx, {
		        type: 'pie',
		        data: {
		            datasets: [ {
		                data: /*[[${transactionByCategory[1]}]]*/ [ ],
		                backgroundColor: /*[[${transactionByCategory[2]}]]*/ [ ],
		                hoverBackgroundColor: /*[[${transactionByCategory[2]}]]*/ [ ]

		                            } ],
		            labels: /*[[${transactionByCategory[0]}]]*/ [ ]
		        },
		        options: {
		            responsive: true
		        }
		    } );
		    
		 	// Deposit By Category
		    var ctx = document.getElementById( "depositByCategory" );
		    ctx.height = 150;
		    var myChart = new Chart( ctx, {
		        type: 'pie',
		        data: {
		            datasets: [ {
		                data: /*[[${transactionByCategory[4]}]]*/ [ ],
		                backgroundColor: /*[[${transactionByCategory[5]}]]*/ [ ],
		                hoverBackgroundColor: /*[[${transactionByCategory[5]}]]*/ [ ]

		                            } ],
		            labels: /*[[${transactionByCategory[3]}]]*/ [ ]
		        },
		        options: {
		            responsive: true
		        }
		    } );
			
			
	
		} )( jQuery );
		/*]]>*/
	</script>

</body>
</html>
